<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>站点客流排行 - Apache ECharts 示例</title>
    <link rel="stylesheet" href="css/style.css?v=1.1">
</head>

<body>
    <div class="navbar">
        <a href="index.html">首页</a>
        <a href="traffic_trend.html">客流趋势分析</a>
        <a href="station_ranking.html">站点客流排行</a>
        <a href="funnel_analysis.html">线路站点客流分析</a>
        <a href="line_comparison.html">线路客流量对比</a>
        <a href="transfer_heatmap.html">换乘热度分析</a>
        <a href="poi_analysis.html">站点周边客流特征</a>
        <a href="anomaly_detection.html">异常客流检测</a>
        <a href="od_analysis.html">路径OD分析</a>
        <a href="stop_frequency_usage_analysis.html">站停频率分析</a>
        <a href="dispatch_suggestion.html">智能调度模型</a>
    </div>
    <div class="page-container">
        <div class="chart-header">
            <h2 class="chart-title">各站点的日均上下车人数排行</h2>
            <p class="chart-description">
                此图表展示了不同站点的日均上车和下车人数排行。通过此分析，可以识别出客流量最大的枢纽站点和客流量相对较小的站点，为站点设施的规划、商业的布局以及运力的合理分配提供依据。
            </p>
        </div>
        <div class="kpi-cards-container">
            <div class="kpi-card">
                <h4>客流最高站点</h4>
                <p id="top-station-total">--</p>
            </div>
            <div class="kpi-card">
                <h4>上车最多站点</h4>
                <p id="top-station-onboard">--</p>
            </div>
            <div class="kpi-card">
                <h4>下车最多站点</h4>
                <p id="top-station-offboard">--</p>
            </div>
            <div class="kpi-card">
                <h4>分析站点总数</h4>
                <p id="total-stations">--</p>
            </div>
        </div>
        <div id="station-ranking-chart" class="chart-container"></div>
    </div>

    <script src="js/echarts.min.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例 (各站点的日均上下车人数排行)
        var stationRankingChart = echarts.init(document.getElementById('station-ranking-chart'));

        // 从后端API获取数据
        fetch('http://localhost:8081/api/station/ranking')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok ' + response.statusText);
                }
                return response.json();
            })
            .then(data => {
                // 假设后端返回的数据格式与 hourly_traffic_trends 类似，包含 stationId, stationName, onboard, offboard
                var stationNames = data.map(item => item.stationName);
                var onboardCounts = data.map(item => item.onboard);
                var alightingCounts = data.map(item => item.offboard);

                // --- KPI Card Calculations for Station Ranking ---
                if (data.length > 0) {
                    // 1. Total Stations Analyzed
                    document.getElementById('total-stations').innerText = data.length;

                    // 2. Most Crowded Station (Onboard + Offboard)
                    let maxTotal = 0;
                    let topStationTotal = '';
                    data.forEach(item => {
                        const total = item.onboard + item.offboard;
                        if (total > maxTotal) {
                            maxTotal = total;
                            topStationTotal = item.stationName;
                        }
                    });
                    document.getElementById('top-station-total').innerHTML = `${topStationTotal}<br><small style="font-size: 0.5em;">${maxTotal.toLocaleString()} 人次</small>`;

                    // 3. Busiest Station (Onboard)
                    const maxOnboard = Math.max(...onboardCounts);
                    const topStationOnboardName = stationNames[onboardCounts.indexOf(maxOnboard)];
                    document.getElementById('top-station-onboard').innerHTML = `${topStationOnboardName}<br><small style="font-size: 0.5em;">${maxOnboard.toLocaleString()} 人次</small>`;

                    // 4. Busiest Station (Offboard)
                    const maxOffboard = Math.max(...alightingCounts);
                    const topStationOffboardName = stationNames[alightingCounts.indexOf(maxOffboard)];
                    document.getElementById('top-station-offboard').innerHTML = `${topStationOffboardName}<br><small style="font-size: 0.5em;">${maxOffboard.toLocaleString()} 人次</small>`;
                }
                // --- End of KPI Card Calculations ---

                var stationRankingOption = {
                    title: {
                        text: '各站点的日均上下车人数排行',
                        left: 'center',
                        textStyle: {
                            color: '#333',
                            fontSize: 20
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'sw'
                        }
                    },
                    legend: {
                        data: ['上车人数', '下车人数'],
                        top: 'bottom'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: stationNames,
                        axisLabel: {
                            rotate: 30
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '人数 (人次)'
                    },
                    series: [
                        {
                            name: '上车人数',
                            type: 'bar',
                            data: onboardCounts
                        },
                        {
                            name: '下车人数',
                            type: 'bar',
                            data: alightingCounts
                        }
                    ]
                };

                stationRankingChart.setOption(stationRankingOption);
            })
            .catch(error => {
                console.error('Error fetching station ranking data:', error);
                // 在这里可以添加错误提示到UI
                stationRankingChart.showLoading({
                    text: '数据加载失败，请检查后端服务或网络连接。',
                    maskColor: 'rgba(255, 255, 255, 0.8)',
                    textColor: '#ff0000'
                });
            });

        window.addEventListener('resize', function () {
            stationRankingChart.resize();
        });
    </script>
    <script src="js/common.js"></script>
</body>

</html>